<template>
<div>  <div id="top">
    <div class="container">
      <div class="text">
        <p><span class="iconfont icon-shouyeshouye"></span>书籍优选</p>
        <p>嘿，欢迎来到书籍优选</p>
        <p><a href="/html/login.html">请登录</a></p>
        <p><a href="/html/register.html">免费注册</a></p>
      </div>
    </div>
  </div>
  <!-- 导航 -->
  <div id="nav">
    <div class="container">
      <!-- logo -->
      <div class="logo">
        <a href="/index.html"><img src="../assets/header/logo.png" alt=""></a>
        <div>
          <h3>书籍优选</h3>
          <span>SHU JI YOU XUAN</span>
        </div>
      </div>
      <!-- search -->
      <form class="search">
        <img src="../assets/header/head_searc.png" alt="">
        <input type="text" name="keyword" placeholder="搜索商品，发现更多优惠">
        <button class="searchBtn">搜索</button>
      </form>
      <!-- icon -->
      <div class="icon">
        <a href="#">
          <img src="../assets/header/head01.png" alt="全程包邮">
          <span>全程包邮</span>
        </a>
        <a href="#">
          <img src="../assets/header/head02.png" alt="全程包邮">
          <span>7天退换</span>
        </a>
        <a href="#">
          <img src="../assets/header/head03.png" alt="全程包邮">
          <span>品质保证</span>
        </a>
        <a href="/html/cart.html">
          <!-- <span class="iconfont icon-gouwuche"></span> -->
          <img src="../assets/header/gowuche.jpg" alt="购物车">
          <span>购物车</span>
        </a>
      </div>
    </div>
  </div></div>
  </template>
  
  <script lang="ts">
  import { defineComponent, ref } from 'vue';
  export default defineComponent({
    name: 'Header',
    setup() {
      const phone = ref('John Doe');
      const userAvatar = ref('avatar.png');
      const cartItemCount = ref(0);
  
      const logout = () => {
        // Do the logout logic here
      };
  
      return {
        phone,
        userAvatar,
        cartItemCount,
        logout,
      };
    },
  });
  </script>
  
  <style scoped>
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 44px;
    padding: 0 24px;
    background-color: #17eab2;
    box-shadow: 0 0 4px rgba(0, 0, 0, 0.2);
  }
  
  .logo img {
    height: 32px;
  }
  
  .user-info {
    display: flex;
    align-items: center;
  }
  
  .avatar img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    margin-right: 16px;
  }
  
  .phone {
    margin-right: 16px;
  }
  
  .phone span {
    font-size: 18px;
    font-weight: bold;
  }
  
  .phone button {
    background-color: transparent;
    border: none;
    cursor: pointer;
    color: #666;
    font-size: 14px;
  }
  
  .cart {
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    border-radius: 4px;
    padding: 8px 12px;
    margin-left: 16px;
  }
  
  .cart i {
    font-size: 24px;
    color: #666;
    margin-right: 8px;
  }
  
  .cart span {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  body{min-width:1200px;background-color:#F6F6F6}
#top{width:100%;height:27px;background-color:#F2F2F2}
#top .container .text{height:27px;font-size:12px;line-height:27px;color:#999;width:400px;display:flex;justify-content:space-around}
#top .container .text a{cursor:pointer;color:#999}
#top .container .text a:hover{color:#DF8042}
#top .container .text span{color:#ff0036;margin-right:5px}#nav{width:100%;height:161px}
#nav .container{height:100%;display:flex;align-items:center;justify-content:space-around}
#nav .container .logo{width:226px;height:75px;display:flex;justify-content:space-between;margin-left:20px}
#nav .container .logo img{width:75px;height:100%}
#nav .container .logo div{font-family:Avenir,Helvetica,Arial,sans-serif;text-align:center;display:flex;flex-direction:column;justify-content:space-evenly}
#nav .container .logo div h3{font-size:28px;color:#3E2210}
#nav .container .logo div span{font-size:8px;font-family:Avenir,Helvetica,Arial,sans-serif}
#nav .container .search{width:532px;height:46px;border:2px solid #3F2511;border-radius:24px;position:relative;display:flex;justify-content:space-evenly;align-items:center;margin-left:78px}
#nav .container .search img{width:20px;height:20px}
#nav .container .search input{width:355px;height:43px;border:none;outline:0;background:#F6F6F6}
#nav .container .search button{width:124px;height:40px;border:none;border-radius:20px;background-color:#FAE569;font-size:14px;color:#43200c;cursor:pointer}
#nav .container .icon{width:210px;height:60px;display:flex;justify-content:space-evenly;margin-right:50px}
#nav .container .icon a{color:#877a73;font-size:12px;display:flex;flex-direction:column;text-align:center;height:60px;justify-content:space-between}
#nav .container .icon a img{width:40px;height:40px;margin:0 auto}
/* #nav .container .icon a .icon-gouwuche{font-size:40px;color:#ff0036} */
  </style>
  